/*
Theme Name: xmt
Theme URI: http://templates.silversite.pl/snaps/demo/
Description: Creative Template is based on the latest standarts for Bootstrap and Wordpress.
Author: piexl
Author URI: www.piexl.net
Version: 0.0.1
Text Domain: xmt
License: GNU General Public License version 3.0
License URI: http://amazeui.org/1.x/
*/

.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}


//文字的堆砌方式
.text-left{
	text-align:left;
}
.text-right{
	text-align:right;
}
.text-center{
	text-align:center;
}


//透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

//垂直居中对其的盒子
.center_v{
    /* Center vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

@color-green:#b0ba2b;
@color-gray:#272828;
@color-orange:#f38001;

body{
  background-color:#e6e6e6;
  max-height:1680px;
  margin:0 auto;
  font:14px/1.5 "微软雅黑";
  color:#252525;
	overflow-x:hidden;
  &.am-with-topbar-fixed-top{
    padding-top:0;
  }
  a{
    color:@color-gray;
    &:hover{
      color:darken(@color-gray, 10%);
    }
  }
  img{
    max-width:100%;
  }
}

//头部开始
.header{
  background-color:rgba(255, 255, 255, 0.2);
  &.bg_white{
    background-color:rgba(255, 255, 255, 0.98);
  }
  position:fixed;
  left:0;
  width:100%;
  top:0;
  padding-top:20px;
  height:90px;
  z-index:1000;
  border-bottom:1px solid rgba(255, 255, 255, 0.1);
  margin-bottom:0;
  .am-topbar-brand{
    height:69px;
    a{
      font-size:0;
      line-height:0;
    }
  }
  .am-collapse{
    padding-top:19px;
  }
  .am-nav{
    background-color:rgba(255, 255, 255, 0.5);
    li{
      a{
        color:@color-gray;
        line-height:40px;
        &:after{
          border-bottom-color:transparent;
        }
        &:hover:after{
          border-bottom-color:#fff;
        }
      }
      &.am-active,&:hover{
        background-color:@color-green;
        a{
          color:#fff;
          // &:after{
          //   border-bottom-color:darken(@color-green, 10%);
          // }
        }
        .am-dropdown-content{
          li{
            a{
              line-height:40px;
              padding:0 0.5em;
              color:@color-gray;
            }
            &:hover{
              a{
                background-color:@color-green;
                color:#fff;
              }
            }
          }
        }
      }
    }
  }
  .am-input-group{
    padding-top:5px;
    padding-bottom:5px;
    background-color:rgba(255, 255, 255, 0.5);
    .am-form-field{
      height:30px;
      padding:5px 0;
      width:170px;
    }
    .am-btn{
      width:30px;
      height:30px;
      padding:0;
      text-align:center;
      background-color:@color-green;
      line-height:0;
      color:#fff;
      .am-icon-search{
        padding:0;
      }
      &:hover{
        background-color:darken(@color-green,5%);
      } 
    }
  }
}

//底部开始
.footer{
  background-color:@color-gray;
  color:#fff;
  padding:30px 0;
  .icon_hy{
    display:inline-block;
    padding-left:30px;
    height:24px;
    line-height:24px;
    margin-bottom:10px;
    background:url(assets/images/address.png) no-repeat 0 0;
    &.qq{background-image:url(assets/images/qq.png);}
    &.phone{background-image:url(assets/images/phone.png);}
    &.email{background-image:url(assets/images/email.png);}
    &.address{background-image:url(assets/images/address.png);}
  }
  a{
    color:darken(#fff, 10%);
    &:hover{
      color:#fff;
    }
  }
  .footer_r{
    padding-top:10px;
    text-align:center;
    a{font-size: 0; line-height:0;}
    p{
      margin:5px 0;
    }
  }
}

//主页样式
.new_list{
  padding-left:20px;
  margin:0;
  li{
    padding:2px 0;
    .time{
      color:lighten(@color-gray,30%);
    }
  }
}
.column{
  &.column1{
    .am-u-md-4{
      padding:0;
    }
    .nav{
      background-color:darken(@color-gray,10%);
      color:#fff;
      border-bottom:1px solid darken(@color-gray, 20%);
      .am-u-md-4{
        padding:10px 10px;
        line-height:20px;
        font-size:14px;
        background-color:darken(@color-gray,10%);
        border-right:1px solid @color-gray;
        border-left:1px solid @color-gray;
        .title{
          font-size:20px;
          padding-right:10px;
          color:@color-green;
        }
      }
      a{
        color:darken(#fff, 10%);
        &:hover{
          color:#fff;
        }
      }
    }
    .cont{
      padding:20px 10px;
      margin-bottom:20px;
      background-color:#fff;
      .am-u-md-4{
        padding:0 10px;
        border-right:1px solid darken(#fff, 10%);
        &.News{
          border-right:0;
        }
        .img{
          font-size:0;
          line-height:0;
          padding:5px 10px;
          background-color:#fff;
          border:1px solid @color-green;
          margin-right:10px;
        }
        &.About .text{
          width:178px;
        }
      }
      .products{
        padding:10px 10px;
        .am-u-md-6{
          padding:0;
          text-align:center;
        }
      }
    }
  }
  &.column2{
    .am-panel{
      border:0;
    }
    .am-panel-hd{
      border-left:5px solid @color-green;
      height:40px;
      line-height:20px;
      background-color:darken(@color-gray, 10%);
      color:@color-green;
      a{
        color:darken(#fff, 10%);
        font-weight:bold;
        font-size:16px;
        &:hover{
          color:#fff;
        }
      }
    }
    .am-slides{
      li{
        font-size:0;
        line-height:0;
        text-align:center;
        a{
          display:inline-block;
          font-size:0;
          line-height:0;
          padding:5px;
          width:232px;
          border:1px solid @color-green;
          img{
            width:100%;
          }
        }
      }
    }
  }
  &.column3{
    .am-panel{
      border:0;
    }
    .am-u-md-4{
      padding:0;
    }
    .am-panel-hd{
      border-left:5px solid @color-green;
      height:40px;
      line-height:20px;
      background-color:darken(@color-gray, 10%);
      color:@color-green;
      a{
        color:darken(#fff, 10%);
        font-weight:bold;
        font-size:16px;
        &:hover{
          color:#fff;
        }
      }
    }
    .am-panel-bd{
      height:190px;
      padding:20px 10px;
      .new_list li{
        padding:5px 0;
      }
    }
  }
}


//详情页
.blog{
  padding-top:110px;
  margin-bottom:20px;
  .title{
    padding:10px 0;
    padding-left:20px;
    background-color:darken(#fff,5%);
    border-radius:3px;
    h3{
      border-left:5px solid @color-gray;
      margin-bottom:0;
      color:@color-gray;
      padding-left:10px;
      font-size:16px;
    }
  }
  .blog_cont{
    padding:20px;
    background-color:#fff;
  }
}

//文章列表页
.items{
  width:100%;
  list-style:none;
  img{width:100%; height:auto;}
  .item{
    padding:20px 0;
    border-bottom:1px solid darken(#fff,10%);
    margin-bottom:20px;
    .w_320{
      width:320px;
      a{
        font-size:0;
        line-height:0;
        display:block;
        width:100%;
        height:0;
        padding-bottom:50%;
        overflow:hidden;
      }
    }
    .w_600{
      width:580px;
      padding-left:20px;
      h3{
        font-size:20px;
        font-weight:bold;
        margin-bottom:10px;
        a{
          color:@color-gray;
          &:hover{
            color:@color-green;
          }
        }
      }
      p{
        font-size:14px;
        color:#252525;
        line-height:2em;
        margin:0;
      }
    }
  }
}

// 商品列表页
.product_cont{
  padding:40px 20px;
  background-color:#fff;
  .items{
    padding:0;
    li{
      padding:1rem;
      border:1px solid lighten(@color-green,20%);
      p{
        margin:0;
        a{
          font-size:0;
          line-height:0;
        }
        &.title{
          font-size:14px;
          line-height:1.8em;
          padding:0 1em;
          background-color:darken(#fff,2%);
        }
        &.info{
          background-color:darken(#fff,5%);
        }
        .price,.norms{
          padding:0;
        }
        .price{
          color:@color-orange;
          font-weight:bold;
        }
        .norms{
          font-size:12px;
          text-align:right;
          color:lighten(@color-gray,20%);
        }
      }
      &:hover{
        border-color:@color-green;
      }
    }
  }
}




// 详情页中的翻页按钮
.pager{
  list-style:none;
  margin-top:20px;
  a{
    margin-right:1em; display:inline-block; padding:0.5em 1em; border-radius:0.3em; background-color:#252525; color:#fff;
    &:hover{
      color:#fff;
      background-color:@color-green;
    }
  }
}


// 分页样式
/* -----------page nav-------*/  
.page_navi{width:100%;height:80px;line-height:36px;text-align:center;overflow:hidden;padding-top:1em;}  
.page_navi a{
  display: inline-block;
  color:@color-green;
  height: 30px;
  line-height: 30px;
  padding:0 12px;
  border: 1px solid @color-green;
  margin: 0 2px;
  border-radius:3px;
  text-align:center;
  vertical-align: middle;
}
.page_navi a:hover{
  text-decoration: none;
  color:#fff;
  background-color:@color-green;
  border: 1px solid @color-green;
}
.page_navi a.current{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  margin: 0 2px;
  color:#fff;
  background-color:@color-green;
  border: 1px solid @color-green;
  border-radius:3px;
  vertical-align: middle;
} 



